import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_shop/components/categoryGoodList.dart';
import 'package:flutter_shop/models/categroyModel.dart';
import 'package:flutter_shop/provider/category.dart';
import 'package:provider/provider.dart';

class CategoryRightPenel extends StatefulWidget {
  @override
  _CategoryRightPenelState createState() {
    return _CategoryRightPenelState();
  }
}

class _CategoryRightPenelState extends State<CategoryRightPenel> {
  List<CategoryGoodsModel> list = [];
  int activeIndex = 0;
  // NOTE: 标志着左边 id
  String leftMenuItemId = "";

  Widget _rightInkWell(
      CategoryProvider provider, BxMallSubDto item, int index) {
    return InkWell(
      onTap: () {
        if (index == this.activeIndex) {
          return;
        }
        this.activeIndex = index;
        provider.setId(item.mallSubId);
      },
      child: Container(
        padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
        child: Text(
          item.mallSubName,
          style: TextStyle(
              fontSize: ScreenUtil().setSp(28),
              color: this.activeIndex == index ? Colors.orangeAccent : null),
        ),
      ),
    );
  }

  Widget _renderTopMenu(CategoryProvider categoryProvider) {
    return Container(
      height: ScreenUtil().setHeight(80.0),
      width: ScreenUtil().setWidth(570.0),
      decoration: BoxDecoration(
          color: Colors.white,
          border:
              Border(bottom: BorderSide(width: 1.0, color: Colors.black12))),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return this._rightInkWell(categoryProvider,
              categoryProvider.childCategoryList[index], index);
        },
        itemCount: categoryProvider.childCategoryList.length,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<CategoryProvider>(
      builder: (context, categoryProvider, _) {
        var categoryId = categoryProvider.categoryId;
        if (this.leftMenuItemId != categoryId) {
          this.activeIndex = 0;
        }
        this.leftMenuItemId = categoryProvider.categoryId;
        return Column(
          children: <Widget>[
            this._renderTopMenu(categoryProvider),
            CategoryGoodList()
          ],
        );
      },
    );
  }
}
